<template>
  <div class="boxRegister">
    <router-link :to="{name:'Login'}"><img src="../../assets/小图标/短箭头.png">账号注册</router-link>
    <div>
      <p>国家/地区</p>
      <select>
        <option>中国</option>
        <option>中国台湾</option>
        <option>中国香港</option>
        <option>其他</option>
      </select>
    </div>
    <div>
      <p>手机号码</p>
      <span>
        <span class="span">+86</span>
        <input type="text" placeholder="请输入手机号" maxlength="11" @blur="tel" ref="tell">
        <p class="msg">{{msg}}<span class="err">{{err}}</span></p>
      </span>
    </div>
    <div>
      <span>
        <span class="span">验证码</span>
        <input type="text" ref="codes" @blur="cod" placeholder="请输入验证码" maxlength="4">
        <button @click="code">{{content}}</button>
        <p class="msg">{{msgcode}}<span class="err">{{errcode}}</span></p>
      </span>
    </div>
    <div class="jurassic">
      <span>
        <span class="span">密码</span>
        <input :type=passtype @blur="pas" ref="pass" placeholder="请输入密码"><img :src=src @click="info">
        <p class="msg">{{msg1}}<span class="err">{{err1}}</span></p>
      </span>
    </div>
    <span class="reg" @click="reg">完成注册</span>
  </div>
</template>

<script>
  let off=true;
    export default {
        name: "Register",
      data(){
        return{
          passtype:"password",
          src:require("../../assets/小图标/yan1.png"),
          msg:"",
          msg1:"",
          err:"",
          err1:"",
          errcode:"",
          msgcode:"",
          content:"获取验证码",
          totime:3
        }
      },
      methods:{
          // 可视化
        info(){
          if(off){
            this.src=require("../../assets/小图标/yan1.png")
            this.passtype="password"
          }else{
            this.src=require("../../assets/小图标/yan.png")
            this.passtype="text"
          }
          off=!off
        },
        // 验证码
        code(){
          this.content = this.totime + 's后发送';
          let times = window.setInterval(()=>{
            this.totime--;
            this.content = this.totime + 's后发送';
            if (this.totime<1){
              window.clearInterval(times);
              this.content = '获取验证码';
              this.totime = 3;
              this.boxTel=Math.floor((Math.random()*(9999-1000+1)+1000));
              alert("您的验证码为"+this.boxTel);
            }
          },1000)
        },
        cod(){
          this.codes = this.$refs.codes.value;
          if (this.codes == this.boxTel && this.codes != null){
            this.msgcode = "验证码正确";
            this.errcode = null
          }else {
            this.errcode = "验证码错误";
            this.msgcode = null;
          }
        },
        // 手机号
        tel(){
          this.usertell=this.$refs.tell.value;
          if(/^1[3456789]\d{9}$/.test(this.usertell)){
            this.msg = "手机号正确";
            this.err = null
          }else {
            this.err = "手机号错误";
            this.msg = null
          }
        },
        // 密码
        pas(){
          this.userpass=this.$refs.pass.value;
          if(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.userpass)){
            this.msg1 = "密码正确";
            this.err1 = null
          }else {
            this.err1 = "密码可能没有数字或者字母，并且长度要大于6";
            this.msg1 = null
          }
        },
        reg(){
          if (/^1[3456789]\d{9}$/.test(this.usertell) && /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.userpass) && this.codes == this.boxTel && this.codes != null) {
            this.$router.push('/login');
            this.$local.set('user',{'username':this.usertell});
            this.$local.set('pass',{'userpass':this.userpass})
          }else {
            alert("填写信息有误")
          }
        }
      }
    }
</script>

<style>
  .boxRegister{font-size: .55rem;margin: .4rem}
  .boxRegister a>img{
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    padding-right: .4rem;
  }
  .boxRegister div>p{
    font-size: .4rem;
    color: #969696;
    padding-top: .3rem;
    padding-bottom: .4rem;
  }
  .boxRegister div>select{
    width: 100%;
    height: 1rem;
    font-size: .5rem;
    margin-bottom: .8rem;
    border: 0;
  }
  .boxRegister div:nth-child(3),.boxRegister div:nth-child(4){
    margin-bottom: .5rem;
  }
  .boxRegister div:nth-child(4) input{
    width: 45%;
  }
  button{
    width: 2.5rem;
    height: .8rem;
    font-size: .4rem;
    color: #0000FF;
  }
  .jurassic img{
    width: .8rem;
    height: .8rem;
    position: absolute;
    right: 1.3rem;
  }
  .reg{
    display: block;
    width: 100%;
    line-height: 1.2rem;
    background: #0000FF;
    color: white;
    text-align: center;
    border-radius: 100px;
    margin-top: .8rem;
  }
  .msg{
    font-size: .3rem;
    color: #0000FF;
    padding-left: 1.8rem;
    padding-top: .3rem;
  }
  .err{color: #d60430}
  .span{
    display: inline-block;
    width: 1.8rem;
  }
</style>
